<template>
  <div class="main">
    <MainTopMenuPanel :activePanel="activePanel" ></MainTopMenuPanel>
    <BaiduMap :devices="devDatas"></BaiduMap>
  </div>
</template>
<script>
import BaiduMap from "@/view/Home/component/BaiduOnlineMap"
import MainTopMenuPanel from "@/view/Home/component/MainTopMenuPanel";
import Device from '@/api/Device';
import {apiResult} from "@/libs/util";
export  default {
  components: {BaiduMap,MainTopMenuPanel},
  /*comments: {BaiduMap},*/
  data(){
    return{
      activePanel:1,
      api: new Device(),
      devDatas:[],
      mapInfo: {
        centerLongitude:114.236262,
        centerLatitude:22.677236,
        minZoom:2,
        maxZoom:20,
        defaultZomm:5,
        mode: 'ONLINE'
      },
    }
  },
  methods:{
    getAll4GDeves(){

      let that = this;
      that.devDatas=[];
      this.$nextTick(() => {
        this.api.queryListWhere(JSON.stringify({type:2})).then(res => {
          //console.log("res: %o",res);
          that.devDatas = [];
          apiResult(res.data,false,result=>{
            that.devDatas = result.data;
            for(let i in that.devDatas){
              if (!that.devDatas[i].lng){
                that.devDatas[i].lng = that.mapInfo.centerLongitude;
                that.devDatas[i].lat=that.mapInfo.centerLatitude;
              }
            }
          })
        })

      })



    }
  },
  mounted() {
    this.getAll4GDeves();
  }

}
</script>

<style lang="less">
//@import "../../my-theme/template";
.main{
  position:relative;
  width: 100%;
  height: 100%;
};
</style>
